<template>
  <div style="padding: 20px">
    <div>
      <el-radio-group v-model="type" style="padding-block-end: 10px">
        <el-radio :label="1" value="1">MD5</el-radio>
        <el-radio :label="2" value="2">Base64加密</el-radio>
        <el-radio :label="3" value="3">Base64解密</el-radio>
        <el-radio :label="4" value="4">unicode编码</el-radio>
        <el-radio :label="5" value="5">unicode解码</el-radio>
        <el-radio :label="6" value="6">URL编码</el-radio>
        <el-radio :label="7" value="7">URL解码</el-radio>
      </el-radio-group>
    </div>
    <div>
      <div v-show="1 === type" class="md5">
        <p>MD5加密：</p>
        <el-input v-model="md5_data" placeholder="请输入需要加密的参数" style="width:600px; float: top; padding: 10px" />
        <el-button type="success" @click="md5_change"> > > MD5加密</el-button>
        <el-input v-model="md5_result" placeholder="加密结果" style="width:600px; float: top; padding: 10px" />
      </div>
      <div v-show="2 === type" class="base64">
        <p>base64加密：</p>
        <el-input v-model="base64_data" placeholder="请输入需要加密的参数" style="width:600px; float: top; padding: 10px" />
        <el-button type="primary" @click="base64_change">>>base64加密</el-button>
        <el-input v-model="base64_result" placeholder="加密结果" style="width:600px; float: top; padding: 10px" />
      </div>
      <div v-show="3 === type" class="base64_decrypt">
        <p>base64解密：</p>
        <el-input v-model="base64_decrypt_data" placeholder="请输入需要解密的参数" style="width:600px; float: top; padding: 10px" />
        <el-button type="primary" @click="base64_decrypt">>>base64解密</el-button>
        <json-viewer :value="base64_decrypt_result" style="width:600px; float: top; padding: 10px" />
      </div>
      <div v-show="4 === type" class="unicode">
        <p>unicode编码：</p>
        <el-input v-model="unicode_data" placeholder="请输入需要加密的参数" style="width:600px; float: top; padding: 10px" />
        <el-button type="warning" @click="unicode_change">>>unicode编码</el-button>
        <el-input v-model="unicode_result" placeholder="加密结果" style="width:600px; float: top; padding: 10px" />
      </div>
      <div v-show="5 === type" class="unicode_decrypt">
        <p>unicode解码：</p>
        <el-input v-model="unicode_decrypt_data" placeholder="请输入需要加密的参数" style="width:600px; float: top; padding: 10px" />
        <el-button type="warning" @click="unicode_decrypt">>>unicode解码</el-button>
        <el-input v-model="unicode_decrypt_result" placeholder="加密结果" style="width:600px; float: top; padding: 10px" />
      </div>
      <div v-show="6 === type" class="url_encode">
        <p>URL编码：</p>
        <el-input v-model="url_encode_data" placeholder="请输入需要加密的参数" style="width:600px; float: top; padding: 10px" />
        <el-button type="danger" @click="url_encode">>>>> URL 编码</el-button>
        <el-input v-model="url_encode_result" placeholder="加密结果" style="width:600px; float: top; padding: 10px" />
      </div>
      <div v-show="7 === type" class="url_decode">
        <p>URL解码：</p>
        <el-input v-model="url_decode_data" placeholder="请输入需要加密的参数" style="width:600px; float: top; padding: 10px" />
        <el-button type="danger" @click="url_decode">>>>> URL 解码</el-button>
        <el-input v-model="url_decode_result" placeholder="加密结果" style="width:600px; float: top; padding: 10px" />
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "EncryptionView",
  data() {
    return {
      url_encode_data: "",
      url_decode_data: "",
      url_encode_result: "",
      url_decode_result: "",
      md5_data: "",
      md5_result: "",
      base64_data: "",
      base64_result: "",
      base64_decrypt_data: "",
      base64_decrypt_result: {},
      unicode_data: "",
      unicode_result: "",
      unicode_decrypt_data: "",
      unicode_decrypt_result: "",
      type: 1
    }
  },
  methods: {
    encodeUnicode(str) {
      const res = [];
      for (let i = 0; i < str.length; i++) {
        res[i] = ("00" + str.charCodeAt(i).toString(16)).slice(-4)
      }
      return "\\u" + res.join("\\u")
    },
    md5_change() {
      if (this.md5_data === "") {
        this.$message.error("请输入需要md5加密的参数")
      } else {
        this.md5_result = this.$md5(this.md5_data)
      }
    },
    base64_change() {
      const Base64 = require('js-base64').Base64;
      if (this.base64_data === "") {
        this.$message.error("请输入需要base64加密的参数")
      } else {
        this.base64_result = Base64.encode(this.base64_data)
      }
    },
    base64_decrypt() {
      const Base64 = require('js-base64').Base64;
      if (this.base64_decrypt_data === null) {
        this.$message.error("请输入需要base64解密的参数")
      } else {
        const res = Base64.decode(this.base64_decrypt_data)
        console.log(typeof res)
        // eslint-disable-next-line no-eval
        if (Base64.decode(this.base64_decrypt_data) && typeof res === 'string') {
          this.base64_decrypt_result = { "result": res }
        } else {
          this.base64_decrypt_result = JSON.parse(Base64.decode(this.base64_decrypt_data))
        }
      }
    },
    unicode_change() {
      if (this.unicode_data === "") {
        this.$message.error("请输入需要unicode编码的参数")
      } else {
        this.unicode_result = this.encodeUnicode(this.unicode_data)
      }
    },
    unicode_decrypt() {
      if (this.unicode_decrypt_data === "") {
        this.$message.error("请输入需要unicode解码的参数")
      } else {
        this.unicode_decrypt_result = unescape(this.unicode_decrypt_data.replace(/\\u/gi, '%u'))
      }
    },
    url_encode() {
      if (this.url_encode_data === "") {
        this.$message.error("请输入需要URL编码的参数")
      } else {
        this.url_encode_result = encodeURIComponent(this.url_encode_data)
      }
    },
    url_decode() {
      if (this.url_decode_data === "") {
        this.$message.error("请输入需要URL解码的参数")
      } else {
        this.url_decode_result = decodeURIComponent(this.url_decode_data)
      }
    }
  }
}
</script>

<style scoped>

</style>
